<!-- 许运科 首页 --> 
<template>
  <div class="index">
    <header>
      <a @click="goMap"
        >{{ this.city }}<img src="/img/Ke_img/形状1.png" alt=""
      /></a>
      <img src="/img/Ke_img/形状3.png" alt="" class="search" />
      <input @click="goSearch" type="text" placeholder="找律师" />
      <img src="/img/Ke_img/形状2.png" alt="" class="middleImg" />
      <img src="/img/Ke_img/形状4.png" alt="" class="code" />
    </header>
    <main>
      <div class="topmain">
        <a @click="goquickly" class="top question">
          <img src="/img/Ke_img/我要咨询.png" alt="" />
        </a>
        <a @click="golaw" class="top weituo">
          <img src="/img/Ke_img/打官司.png" alt="" />
        </a>
      </div>
      <div class="nav">
        <a @click="gofamily">
          <img src="/img/Ke_img/组22(1).png" alt="" />
          <p>家庭婚姻</p>
        </a>
        <a href="">
          <img src="/img/Ke_img/组23.png" alt="" />
          <p>劳动工伤</p>
        </a>
        <a href="">
          <img src="/img/Ke_img/组24(1).png" alt="" />
          <p>借款借贷</p>
        </a>
        <a href="">
          <img src="/img/Ke_img/组24.png" alt="" />
          <p>合同纠纷</p>
        </a>
        <a href="">
          <img src="/img/Ke_img/组25.png" alt="" />
          <p>交通事故</p>
        </a>
        <a href="">
          <img src="/img/Ke_img/组22(3).png" alt="" />
          <p>房产纠纷</p>
        </a>
        <a href="">
          <img src="/img/Ke_img/组22.png" alt="" />
          <p>刑事辩护</p>
        </a>
        <a href="">
          <img src="/img/Ke_img/组22(2).png" alt="" />
          <p>经济纠纷</p>
        </a>
        <a href="">
          <img src="/img/Ke_img/组22(5).png" alt="" />
          <p>消费权益</p>
        </a>
        <a href="">
          <img src="/img/Ke_img/组22(4).png" alt="" />
          <p>全部类别</p>
        </a>
      </div>
      <h1 class="title">精选律师</h1>
      <div class="lawyer">
        <a
          class="news"
          @click="goLawyer(item.id)"
          v-for="(item, index) in list"
          :key="index + 1000"
        >
          <img :src="item.url" alt="" />
          <div class="name">{{ item.name }}</div>
          <p>{{ item.lawyerIntroduction }}</p>
          <div class="list">
            <i>￥60</i
            ><span
              ><b>{{ item.servePeopleNumber }}</b
              >人咨询</span
            >
          </div>
        </a>
        <!-- <a class="news" v-for="(item, index) in list" :key="index">
          <img :src="item.url" alt="" />
          <div class="name">{{ item.name }}</div>
          <p>{{ item.lawyerIntroduction }}</p>
          <div class="list">
            <i>￥70</i
            ><span
              ><b>{{ item.servePeopleNumber }}</b
              >人咨询</span
            >
          </div>
        </a> -->
      </div>
    </main>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  components: {},
  data() {
    return {
      city: "全国",
    };
  },
  created() {
    this.init();
    let city = localStorage.getItem("city");
    this.city = city;
  },
  computed: {
    ...mapState("ke", ["list"]),
  },
  methods: {
    goMap() {
      // 使用 Vue.use(VueRouter)  会往this添加 this.$router   this.$route
      // this.$router  路由实例
      // this.$route   当前路由信息
      // this.$router.push  跳转到指定页面
      this.$router.push("/home/index/map");
    },
    goSearch() {
      this.$router.push("/home/index/search");
    },
    goLawyer(id) {
      this.detail(id);
      this.$router.push("/home/index/lawyer");
    },
    goquickly() {
      this.$router.push("/home/index/quickly");
    },
    gofamily() {
      this.$router.push("/home/index/family");
    },
    golaw() {
      this.$router.push("/home/index/weituo");
    },
    ...mapActions("ke", ["init"]),
    ...mapActions("di", ["detail"]),
  },
  //局部自定义指令
  directives: {
    phone: {
      // 第一次绑定到元素时调用
      bind() {},
      // 被绑定**元素**插入父节点时调用
      inserted() {},
      // 数据更新时调用
      update(el, { value }) {
        if (value.length === 11) {
          el.style.color = "green";
        } else {
          el.style.color = "red";
        }
      },
      // componentUpdated  指定元素及子节点更新完成后会触发
      // 取消绑定后触发
      unbind() {},
    },
  },
};
</script>

<style scoped>
/* scoped 让样式只在当前组件生效  ！important(父子元素存在同样类名时用)*/
.index {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
header {
  width: 100%;
  margin: 0.24rem;
  margin-right: 0;
  display: flex;
  position: relative;
}
header a {
  font-size: 0.3rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 0.7rem;
}
header a img {
  margin-left: 0.1rem;
}
header input {
  width: 5.1rem;
  height: 0.7rem;
  padding-left: 0.61rem;
  font-size: 0.24rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #999999;
  margin-left: 0.31rem;
}
header img {
  width: 0.17rem;
  height: 0.17rem;
}
header .search {
  position: absolute;
  width: 0.29rem;
  height: 0.29rem;
  left: 1.3rem;
  top: 0.23rem;
}
header .middleImg {
  position: absolute;
  width: 0.04em;
  height: 0.38rem;
  right: 1.4rem;
  top: 0.23rem;
}
header .code {
  position: absolute;
  width: 0.33rem;
  height: 0.32rem;
  right: 0.9rem;
  top: 0.24rem;
}
.topmain {
  width: 100%;
  height: 2.8rem;
}
.top {
  width: 3.3rem;
  height: 2.8rem;
  float: left;
  margin-left: 0.23rem;
}
.question img {
  width: 3.4rem;
  height: 2.8rem;
}
.weituo img {
  margin-top: 0.1rem;
  width: 3.94rem;
  height: 2.49rem;
}

/* 导航页 */
.nav {
  position: relative;
  left: 0;
  top: -0.3rem;
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  flex-direction: row;
}
.nav a {
  position: relative;
  text-align: center;
  width: 1.12rem;
  margin: 0.1rem;
}
.nav a img {
  width: 1.12rem;
  height: 1.12rem;
  display: block;
  margin: 0 auto;
}
.nav a p {
  position: absolute;
  left: 0;
  bottom: -0.2rem;
  font-size: 0.24rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
}
.title {
  margin-left: 0.23rem;
  font-size: 0.32rem;
  font-family: PingFang SC;
  font-weight: 600;
  color: #333333;
}
/* 律师信息页 */
.lawyer {
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
}
.lawyer a {
  margin: 0 0.1rem;
  width: 3.32rem;
  height: 2.7rem;
  position: relative;
}
.lawyer a img {
  width: 3.32rem;
  height: 1.66rem;
}
.lawyer a .name {
  width: 3.1rem;
  position: absolute;
  left: 0rem;
  top: 1.21rem;
  padding-left: 0.2rem;
  background-color: rgba(128, 128, 128, 0.5);
}
.lawyer a p {
  font-size: 0.2rem;
  margin-left: 0.1rem;
}
.lawyer a .list {
  height: 0.4rem;
  line-height: 0.4rem;
}
.lawyer a .list span b {
  font-weight: normal;
}
.lawyer a .list span {
  float: right;
  font-weight: lighter;
  color: #999999;
  font-size: 0.1rem;
  /*   line-height: .3rem; */
}
.lawyer a .list i {
  color: red;
  margin-left: 0.1rem;
}
</style>